<template>
  <div class="good-list">
    <div class="" style="display: grid; grid-template-columns: 1fr 1fr; gap: 16rpx">
      <template v-for="(product, index) in designerProductData" :key="index">
        <GoodItem :product="product"></GoodItem>
      </template>
    </div>
  </div>
  <un-data v-if="!designerProductData?.length" class="un-data-content" style="position: relative; top: 160rpx;"></un-data>
</template>

<script setup lang="ts">
import GoodItem from '@/components/good/GoodItem.vue';
import { onShow } from '@dcloudio/uni-app';
import { getTheProductsILikeBasedOnTheDesigner } from '@/api/designUser';
import { onMounted, shallowRef } from "vue";
import UnData from '@/components/un-data/UnData.vue';

const props = defineProps({
  designerId: {
    type: String,
    default: '',
  },
});

const designerProductData = shallowRef({
  products: [],
});

onMounted(() => {
  queryProducts();
});
onShow(() => {
  queryProducts();
});

function queryProducts(page = 1) {
  const data = {
    page: page,
    limit: 1000,
    orderBy: 'orders',
    designerUid: props.designerId,
  };
  return getTheProductsILikeBasedOnTheDesigner(data).then((res) => {
    designerProductData.value = res.data;
  });
}
</script>

<style scoped lang="scss">
.good-list {
  padding: 1prx 0 0;
  :deep(.un-data) {
    margin: 160rpx 0 0;
  }
}
</style>
